<template>
	<div class="mc-number">
		<div>
			<span
				v-if="addonBefore"
				class="addonBefore"
			>{{addonBefore}} </span>
			<span class="innerValue">{{innerValue}}</span>
			<span
				v-if="addonAfter"
				class="addonAfter"
			>{{addonAfter}}</span>
		</div>
		<div
			v-if="isAmountChinese"
			class="input-color"
		>
			{{amountChineseName}}
		</div>
	</div>
</template>
<script>
import {thousandsFormat} from '../../utils';
import convertToChineseNumber from 'number2chinesenumber';
export default {
	name:'McNumber',
	components:{},
	props:{
		value:{
			type:[Number, String],
			default:undefined,
		},
		thousands:{
			type:Boolean,
			default:false,
		},
		isAmountChinese:{
			type:Boolean,
			default:false,
		},
		addonBefore:{
			type:String,
			default:'',
		},
		addonAfter:{
			type:String,
			default:'',
		},
		precision:{
			type:Number,
			default:0,
		},
	},
	data(){
		return {
			innerValue:0,
			amountChineseName:'',
		};
	},
	computed:{},
	watch:{
		value:{
			handler(val){
				this.innerValue = val;
				this.thousandSeparator();
			},
			immediate:true,
		},
	},
	created(){},
	mounted(){},
	methods:{
		thousandSeparator(){
			if(this.isAmountChinese)this.amountChineseName = convertToChineseNumber(this.innerValue, 'maxAmount');
			if(this.thousands){
				this.innerValue = thousandsFormat(this.innerValue);
			}else{
				this.innerValue = Number(this.innerValue).toFixed(this.precision || 0);
			}
			return this.innerValue;
		},
	},
};
</script>
<style lang="scss" scoped>
.mc-number {
    color: #999;
    .addonBefore {
        padding-right: 8px;
        color: #303133;
    }
    .addonAfter {
        padding-left: 8px;
        color: #303133;
    }
    .innerValue {
        color: #606266;
    }
    .input-color {
        color: #c0c0c0;
    }
}
</style>